<template>
  <div class="emergency_box">
    <div class="emergency_top">
      <div class="emergency_title">设备位置分布</div>
    </div>
    <div v-if="tableDate&&tableDate.length>0" id="main" class="col-md-12  col-sm-12 col-xs-12" style="height: 100%;" />
    <div v-else class="echarts_noData">
      <svg-icon icon-class="暂无数据" />
    </div>
  </div>
</template>

<script>
import { deviceLocationDistribution } from '@/api/equipmentManage/equipmentReport/dataBoard'
import Big from 'big.js' // big.js解决精度丢失问题
export default {
  name: 'LocationDistribution',
  data() {
    return {
      msg: 'fafa',
      tableDate: [1]
    }
  },
  mounted() {
    // this.drawLine()
    this.getList()
  },
  methods: {
    getList() {
      deviceLocationDistribution().then(res => {
        this.tableDate = res.data
        this.$nextTick(() => {
          this.drawLine()
        })
      })
    },
    drawLine() {
      const myChart = this.$echarts.init(document.getElementById('main'))
      const arr = []
      const nameArray = []
      this.tableDate.forEach(item => {
        // arr.push(item.number)
        arr.push({
          value: new Big(item.ratio).times(100).toString(),
          name: item.location + ',' + item.number
        })
        nameArray.push(item.location)
      })
      myChart.setOption({
        tooltip: {
          show: false
        },
        // 右边信息面板
        legend: {
          orient: 'vertical',
          right: '20',
          top: 'middle',
          itemHeight: 15,
          itemWidth: 45,
          itemGap: 20,
          formatter: name => {
            let params1 = name.split(',')[0]
            if (params1.length > 7) {
              params1 = params1.substr(0, 6) + '...'
            }
            const params2 = name.split(',')[1]
            const arr = [
              '{a|' + params1 + '}',
              '{b|' + params2 + '}'
            ]
            return arr.join('')
          },
          textStyle: {
            rich: {
              a: {
                color: '#999999',
                fontSize: 18,
                width: 50,
                padding: [0, 15]
              },
              b: {
                align: 'right',
                fontSize: 18,
                width: 80
              }
            }
          }
        },
        // 设置饼状图每个颜色块的颜色
        color: ['#6CF72D', '#FFCC00', '#FF8385', '#5AD1FF', '#9C74FF'],
        // 牵引线
        series: [
          {
            type: 'pie',
            radius: ['18%', '60%'],
            center: ['32%', '50%'],
            avoidLabelOverlap: false,
            silent: true,
            label: {
              show: true,
              width: 0,
              height: 0,
              lineHeight: 0,
              backgroundColor: 'auto',
              padding: [0, 10],
              // 格式化牵引线上文字
              formatter: '{c|{c}%}',
              align: 'center',
              rich: {
                top: {
                  verticalAlign: 'bottom',
                  padding: [5, 10, 0, 10],
                  align: 'center',
                  // 牵引线上文字大小
                  fontSize: 12
                },
                bottom: {
                  padding: [0, 10, 5, 10],
                  verticalAlign: 'top',
                  align: 'center'
                },
                c: {
                  color: '#666666'
                }
              }
            },
            emphasis: {
              label: {
                show: true,
                fontSize: '40',
                fontWeight: 'bold'
              }
            },
            labelLine: {
              show: true, // 数据标签引导线
              // 牵引线长度
              length: 10,
              length2: 20,
              lineStyle: {
                width: 1,
                type: 'solid',
                color: '#979797'
              }
            },
            data: arr
          }
        ]
      })
    }
  }
}
</script>

<style lang="less" scoped>
.emergency_box{
  width: 100%;
  height: calc(100% - 50px);
}

.emergency_top {
  display: flex;
  justify-content: space-between;

  .emergency_title {
    font-size: 24px;
    font-weight: bold;
    line-height: 34px;
    letter-spacing: -0.21px;
    color: #333333;
    padding-top: 16px;
    padding-left: 40px;
  }
}

</style>
